<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>房间管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>
    <script src="/layui/lay/modules/jquery.js"></script>
    <script>

    </script>

</head>
<body>

<!--弹窗-->
<div id="changInfo" style="display: none; padding: 5px">
    <form class="layui-form" action="" onsubmit="false" id="roomchange" lay-filter="roomInfo">

        <!--房间id-->
        <div class="layui-form-item layui-row" id="roomId">
            <label class="layui-form-label">房间ID：</label>
            <div style="margin-left: 0" class="layui-input-block layui-col-sm4">
                <input type="text" name="roomid" autocomplete="off" readonly="readonly"
                       class="layui-input">
            </div>
        </div>

        <!--所属酒店-->
        <div class="layui-form-item layui-row" id="hotelchange">
            <label class="layui-form-label ">所属酒店：</label>
            <div style="margin-left: 0" class="layui-input-block layui-col-sm4">
                <input type="text" id="changehotelname" name="hotelName" autocomplete="off" readonly="readonly"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-row" id="hoteladd" style="display: none">
            <label class="layui-form-label ">所属酒店：</label>
            <div class="layui-input-inline" style="padding-right: 20px">
                <div style="margin-left: 0;">
                    <select name="hotelid" lay-filter="select" id="addhotelname" lay-verify="required"
                            lay-search="">

                    </select>
                </div>
            </div>
        </div>

        <!--房间号-->
        <div class="layui-form-item layui-row">
            <label class="layui-form-label ">房间号：</label>
            <div style="margin-left: 0" class="layui-input-block layui-col-sm3">
                <input type="text" id="roomnum" name="roomnum" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <!--房间类型-->
        <div class="layui-form-item layui-row">
            <div class="layui-inline ">
                <label class="layui-form-label">房间类型：</label>
                <div class="layui-input-inline" style="padding-right: 20px">
                    <div style="margin-left: 0;">
                        <select name="roomtypeid" lay-filter="select" id="roomStyle" lay-verify="required"
                                lay-search="">

                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!--房间价格相关-->
        <div class="layui-form-item layui-row">
            <label class="layui-form-label">房间价格：</label>
            <div style="margin-left: 0" class="layui-input-block layui-col-sm1">
                <input type="text" name="roomprice" title="注意：修改此项将会修改所有此类型的房间价格"
                       autocomplete="off" placeholder="￥" required lay-verify="required" lay-reqtext="房间价格不能为空"
                       class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
            <label class="layui-form-label">房间折扣：</label>
            <div style="margin-left: 0;margin-right: 0" class="layui-input-block layui-col-sm1">
                <input type="text" name="discount" lay-verify="title" style="text-align: right;" autocomplete="off"
                       class="layui-input" value="100">
            </div>
            <div class="layui-form-mid layui-word-aux">%</div>
            <label class="layui-form-label ">房间押金：</label>
            <div style="margin-left: 0" class="layui-input-block layui-col-sm1">
                <input type="text" name="cashpledge" lay-verify="title" autocomplete="off" placeholder="￥"
                       class="layui-input">
            </div>
        </div>

        <!--房间状态-->
        <div class="layui-form-item layui-row" id="roomStatus">
            <label class="layui-form-label ">房间状态：</label>
            <div style="margin-left: 0" class="layui-input-inline layui-col-sm2">
                <input type="text" class="layui-input" name="roomstatus" autocomplete="off"
                       readonly="readonly">
            </div>
        </div>

        <!--范围-->
        <!--<div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">范围</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid">-</div>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>-->

        <!--复选框-->
        <!--<label class="layui-form-label">复选框</label>
        <div class="layui-input-block">
            <input type="checkbox" value="" name="like[write]" title="写作">
            <input type="checkbox" name="like[read]" title="阅读">
            <input type="checkbox" name="like[game]" title="游戏">
        </div>-->

        <!--房间特点-->
        <div class="layui-form-item">
            <label class="layui-form-label">房间特点：</label>
            <div class="layui-inline">
                <div class="layui-inline">
                    <div class="layui-form-mid layui-word-aux">早餐</div>
                    <input type="checkbox" name="breakfast" lay-skin="switch" lay-text="含早|不含早">
                </div>
                <div class="layui-inline">
                    <div class="layui-form-mid layui-word-aux">窗户类型</div>
                    <input type="checkbox" style="padding-left: 20px" name="window" lay-skin="switch"
                           lay-text="落地窗|小窗">
                </div>
            </div>
        </div>

        <!--文件上传-->
        <div class="layui-form-item" id="img">
            <div class="layui-upload" style="height: auto">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择图片</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <!--<button type="button" class="layui-btn" id="testListAction">开始上传</button>-->
            </div>
        </div>

        <!--摁钮-->
        <div class="layui-form-item">
            <div class="layui-input-block" id="bottons">
                <button class="layui-btn" lay-submit="" lay-filter="changeSubmit" id="changeSubmit"
                        style="display: none">立即提交
                </button>
                <button class="layui-btn" lay-submit="" lay-filter="addSubmit" id="addSubmit" style="display: none">
                    立即提交
                </button>
                <button class="layui-btn layui-btn-primary" type="reset">重置</button>
            </div>
        </div>

    </form>
    <!--表单提交相关-->
    <script>
        layui.use(['form', 'upload'], function () {
            var form = layui.form
                , $ = layui.jquery
                , upload = layui.upload
                , files = null; //存储图片合集
            form.render();

            //多文件列表示例
            var demoListView = $('#demoList')
                , uploadListIns = upload.render({
                elem: '#testList'
                , url: '/upload/'
                , accept: 'images'
                , exts: 'jpg|png|jpeg|gif|bmp'
                , multiple: true
                , auto: false
                , method: 'post'
                , size: 800      //允许上传大小，单位kb
                // , bindAction: '#testListAction'  //上传摁钮监听
                , choose: function (obj) {
                    files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function (index, file, result) {
                        var tr = $(['<tr id="upload-' + index + '">'
                            , '<td>' + '<img src="' + result + '" style="width: 80px;height: 80px" alt="' + file.name + '" class="layui-upload-img">' + file.name + '</td>'
                            , '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>'
                            , '<td>等待上传</td>'
                            , '<td>'
                            , '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            , '</td>'
                            , '</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function () {
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function () {
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
                , done: function (res, index, upload) {
                    if (res.code == 0) { //上传成功
                        var tr = demoListView.find('tr#upload-' + index)
                            , tds = tr.children();
                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                , error: function (index, upload) {
                    var tr = demoListView.find('tr#upload-' + index)
                        , tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });

            //添加提交监听
            form.on('submit(addSubmit)', function (data) {
                var myForm = document.getElementById("roomchange");
                var formData = new FormData(myForm);
                //循环 files(存入多图片choose回调中储存的对象)  逐条插入到formData
                if (files != null && files.length != 0) {
                    for (var i in files) {
                        formData.append("files", files[i]);//此处的files为上传接口参数名
                    }
                }
                $.ajax({
                    url: '/room/insert',
                    type: 'post',
                    data: formData,
                    async: false,
                    contentType: false,   //ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                    processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                    success: function (info) {
                        layer.msg('添加成功', {
                            time: 1500, //1.5s后自动关闭
                        });
                        layer.closeAll();
                        table.reload("rooms", {})// 重新渲染表格
                    },
                    error: function () {
                        parent.layer.alert("网络超时");
                    }
                });
                return false;
            })

            //修改提交监听
            form.on('submit(changeSubmit)', function (data) {
                var myForm = document.getElementById("roomchange");
                var formData = new FormData(myForm);
                //循环 files(存入多图片choose回调中储存的对象)  逐条插入到formData
                if (files != null && files.length != 0) {
                    for (var i in files) {
                        formData.append("files", files[i]);//此处的files为上传接口参数名
                    }
                }
                $.ajax({
                    url: '/room/updateOneAll',
                    type: 'post',
                    data: formData,
                    async: false,
                    contentType: false,   //ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                    processData: false,   //当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                    success: function (info) {
                        layer.msg('修改成功', {
                            time: 1500, //1.5s后自动关闭
                        });
                        layer.closeAll();
                        table.reload("rooms", {})// 重新渲染表格
                    },
                    error: function () {
                        parent.layer.alert("网络超时");
                    }
                });
                return false;
            })
        });
    </script>
</div>

<!--展示表格-->
<table class="layui-table" id="rooms" lay-filter="roomtable"></table>

<!--表工具栏-->
<script type="text/html" id="tableToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addData">添加房间</button>
    </div>
</script>

<!--行操作工具栏-->
<script type="text/html" id="demo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
    </div>
</script>

<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table,
            layer = layui.layer,
            form = layui.form,
            $ = layui.jquery;

        //表格数据获取
        table.render({
            elem: "#rooms"
            , url: "/room/allRoomInfo"
            , toolbar: "#tableToolbar"
            /*, parseData: function (res) { //获取数据后预操作
                for (i = 0; i < res.data.length; i++) {
                }
            }*/
            , cols: [[ //标题栏
                {field: 'roomid', title: 'ID', width: 50, sort: true}
                , {field: 'hn', title: '所属酒店名称', width: 120}
                , {field: 'roomnum', title: '房间号', minWidth: 80}
                , {field: 'rt', title: '房间类型', minWidth: 100}
                , {field: 'roomprice', title: '房间价格', width: 120, sort: true}
                , {field: 'cashpledge', title: '房间押金', width: 120, sort: true}
                , {field: 'discount', title: '折扣', width: 80, sort: true}
                , {
                    field: 'roomstatus', title: '房间状态', width: 100, templet: function (d) {
                        switch (d.roomstatus) {
                            case 0:
                                return '<div>空闲</div>';
                            case 1:
                                return '<div>已入住</div>';
                            case 2:
                                return '<div>已预定</div>';
                            case 3:
                                return '<div>待打扫</div>';
                        }
                    }
                }
                , {field: 'roomtrait', title: '房间特点', width: 180}
                , {fixed: 'right', width: 178, align: 'center', toolbar: '#demo'}
            ]]
            , even: true
            , page: true //是否显示分页
            , limits: [5, 10, 20] //可选每页数量
            , limit: 5 //每页默认显示的数量
        });

        //监听头事件
        table.on('toolbar(roomtable)', function (obj) {
            var event = obj.event;
            if (event === 'addData') {
                //清空列表元素
                $("#roomchange")[0].reset();

                //显示/隐藏所需元素
                $("#roomchange").css("pointer-events", "");
                $("#bottons").css("display", "");
                $("#roomId").css("display", "none");
                $("#roomStatus").css("display", "none");
                $("#changeSubmit").css("display", "none");
                $("#hotelchange").css("display", "none");
                $("#addSubmit").css("display", "");
                $("#hoteladd").css("display", "");
                $("#img").css("display", "");
                $("#changehotelname").attr("name", "none");
                $("#addhotelname").attr("name", "hotelid");
                alertChange(null);
            }
        });

        //监听行事件
        table.on('tool(roomtable)', function (obj) {
            var data = obj.data,
                layEvent = obj.event;
            if (layEvent === 'delete') {
                if (data.roomstatus == 1||data.roomstatus == 2) {
                    layer.confirm('当前房间状态不可删除');
                } else {
                    layer.confirm('真的删除行么', function (index) {
                        //向服务端发送删除指令
                        var status = deleteRoom(data.roomid);
                        if (status == 1) {
                            layer.msg('删除成功', {
                                time: 1500, //1.5s后自动关闭
                            });
                            obj.del(obj); //删除对应行（tr）的DOM结构
                            layer.close(index);
                        } else {
                            layer.msg('删除失败，请稍后重试', {
                                time: 1500, //1.5s后自动关闭
                            });
                        }
                    });
                }
            } else if (layEvent === 'edit') {
                //清空列表元素
                $("#roomchange")[0].reset();

                //显示/隐藏所需元素
                $("#roomchange").css("pointer-events", "");
                $("#bottons").css("display", "");
                $("#roomId").css("display", "");
                $("#roomStatus").css("display", "");
                $("#hotelchange").css("display", "");
                $("#changeSubmit").css("display", "");
                $("#addSubmit").css("display", "none");
                $("#hoteladd").css("display", "none");
                $("#img").css("display", "none");
                $("#changehotelname").attr("name", "hotelName");
                $("#addhotelname").attr("name", "none");

                alertChange(data);
            }
        });

        //监听双击事件
        table.on('rowDouble(roomtable)', function (obj) {
            var data = obj.data;
            $("#bottons").css("display", "none");
            $("#img").css("display", "none");
            $("#roomchange").css("pointer-events", "none");
            alertChange(data);
        });

        //删除指定房间
        function deleteRoom(roomid) {
            var a;
            $.ajax({
                url: "/room/deleteId",
                async: false,
                data: {
                    'roomid': roomid
                },
                success: function (bb) {
                    if (bb.indexOf("成功") >= 0) {
                        a = 1;
                    } else {
                        a = 1;
                    }
                },
                error: function () {
                    a = 0;
                }
            });
            return a;
        }

        //弹出更改窗口
        function alertChange(data) {
            if (data != null && data.roomid != null && data.roomid > 0) {
                //房间特征
                var window = false;   //默认小窗
                var breakfast = true; //默认含早
                if (data != null && data != "" && data.roomtrait.indexOf("不含早") >= 0) {
                    breakfast = false;
                }
                if (data != null && data != "" && data.roomtrait.indexOf("落地窗") >= 0) {
                    window = true;
                }

                var status;
                switch (data.roomstatus) {
                    case 0:
                        status= '空闲';
                        break;
                    case 1:
                        status= '已入住';
                        break;
                    case 2:
                        status= '已预定';
                        break;
                    case 3:
                        status= '待打扫';
                        break;
                }

                // 其他属性赋值
                form.val('roomInfo', {   //lay-filter,数据数组
                    "roomid": data.roomid // "name": "value"
                    , "hotelName": data.hn
                    , "roomnum": data.roomnum
                    , "roomprice": data.roomprice
                    , "discount": data.discount
                    , "cashpledge": data.cashpledge
                    , "window": window
                    , "breakfast": breakfast
                    , "roomtype": data.rt
                    , "roomstatus": status
                    // , "window": true
                });
            }
            roomType(data);
            if (data == null) {
                hotelName();
            }

            layer.open({
                type: 1
                , area: ["600px", "700px"]
                , content: $('#changInfo')
                , success: function (layero, index) {
                    layui.use('form', function () {
                        var form = layui.form;
                        form.render();
                    });
                }
            })
        }

        //获取所有酒店
        function hotelName() {
            $.ajax({
                url: "/hotel/findHotel",
                async: false,
                success: function (obj) {
                    //下拉框
                    var hotelSelect = $("#addhotelname");
                    hotelSelect.html("");
                    var hotelName = "";
                    for (i = 0; i < obj.length; i++) {
                        hotelName += "<option value='" + obj[i].hotelid + "'>" + obj[i].hotelname + "</option>";
                    }
                    hotelSelect.append(hotelName);
                    form.render();
                }
            });
        }

        //获取房间类型
        function roomType(data) {
            $.ajax({
                url: "/roomType/allRoomType",
                async: false,
                success: function (obj) {
                    //下拉框
                    var typeSelect = $("[name='roomtypeid']");
                    typeSelect.html("");
                    var roomType = "<option value=''>请选选择房间类型</option>";
                    for (i = 0; i < obj.length; i++) {
                        if (data != null && data.roomType != null && data.roomType.roomtypeid == obj[i].roomtypeid) {
                            roomType += "<option selected='selected' value='" + obj[i].roomtypeid + "' >" + obj[i].roomtype + "</option>";
                        } else {
                            roomType += "<option value='" + obj[i].roomtypeid + "'>" + obj[i].roomtype + "</option>";
                        }
                    }
                    typeSelect.append(roomType);
                    form.render();
                }
            });
        }

        //房间类型和房价联动
        form.on('select(select)', function (data) {
            if (data.value != null && data.value != "") {
                $.ajax({
                    url: "/roomType/selectPrice",
                    data: {
                        typeId: data.value
                    },
                    success: function (roomtype) {
                        $("[name='roomprice']").val(roomtype.roomprice);
                        if(roomtype.roomtypeid==1){
                            $("[name='cashpledge']").val("50")
                        }else if(roomtype.roomtypeid==2){
                            $("[name='cashpledge']").val("100")
                        }else if(roomtype.roomtypeid==3){
                            $("[name='cashpledge']").val("150")
                        }else if(roomtype.roomtypeid==4){
                            $("[name='cashpledge']").val("200")
                        }
                    }
                })
            }
            /*alert(data.value); //得到被选中的值
            alert(data.elem); //得到select原始DOM对象
            alert(data.othis); //得到美化后的DOM对象*/
        });

    });
</script>
</body>
</html>